﻿@page "/pivot-table/show-hide-totals"

@using Syncfusion.Blazor.PivotView
@using Syncfusion.Blazor.DropDowns
@using Syncfusion.Blazor.Buttons
@inherits SampleBaseComponent;
@using BlazorDemos
@using ej2_blazor_productdetails

<SampleDescription>
    <p>This sample demonstrates showing and hiding grand totals and subtotals in rows, columns, or both at runtime. Also, end users can specify and hide subtotals of specific fields.</p>
</SampleDescription>
<ActionDescription>
  <p>In this sample, you can hide grand totals in row, column, or both using radio buttons available under the
     <b>Hide grand totals</b> category. To hide grand totals in both row and column, set the <code>ShowGrandTotals</code> property in <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html'>PivotViewDataSourceSettings</a></code> class to <b>false</b>. To hide the row and column grand totals separately,
     set the <code>ShowRowGrandTotals</code> and <code>ShowColumnGrandTotals</code> properties in <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html'>PivotViewDataSourceSettings</a></code> class to <b>false</b>.</p>
  <p>Also, in this sample, you can hide subtotals for specific fields too. It can be achieved by selecting appropriate fields from the drop-down available under the <b>Hide sub-totals</b> category.
        To hide subtotals for a specific field, set the <code>ShowSubTotals</code> property to <b>false</b> inside the field definition.</p>
  <p>For more information <a target='_blank' href='https://blazor.syncfusion.com/documentation/pivot-table/show-hide-totals/'>refer</a>.</p> 
</ActionDescription>

<div class="col-lg-9 control-section sb-property-border">
    <div class="content-wrapper">
        <SfPivotView TValue="PivotProductDetails" Height="400" Width="100%" EnableValueSorting=true ShowTooltip=false>
            <PivotViewDataSourceSettings DataSource="@Data" ExpandAll=false EnableSorting=true ShowColumnGrandTotals="@ColumnGrandTotal" ShowRowGrandTotals="@RowGrandTotal" ShowGrandTotals="@GrandTotal">
                <PivotViewColumns>
                    <PivotViewColumn Name="Year" ShowSubTotals="@ColumnSubTotal"></PivotViewColumn>
                    <PivotViewColumn Name="Order_Source" Caption="Order Source"></PivotViewColumn>
                </PivotViewColumns>
                <PivotViewRows>
                    <PivotViewRow Name="Country" ShowSubTotals="@RowSubTotal"></PivotViewRow>
                    <PivotViewRow Name="Products"></PivotViewRow>
                </PivotViewRows>
                <PivotViewValues>
                    <PivotViewValue Name="Sold" Caption="Units Sold"></PivotViewValue>
                    <PivotViewValue Name="Amount" Caption="Sold Amount"></PivotViewValue>
                </PivotViewValues>
                <PivotViewFilters>
                    <PivotViewFilter Name="Product_Categories" Caption="Product Categories"></PivotViewFilter>
                </PivotViewFilters>
                <PivotViewFormatSettings>
                    <PivotViewFormatSetting Name="Amount" Format="C0" UseGrouping=true></PivotViewFormatSetting>
                </PivotViewFormatSettings>
                <PivotViewFilterSettings>
                    <PivotViewFilterSetting Name="Products" Items="@(new string[] { "Gloves", "Helmets", "Shorts", "Vests" })"></PivotViewFilterSetting>
                </PivotViewFilterSettings>
                <PivotViewDrilledMembers>
                    <PivotViewDrilledMember Name="Country" Items="@DrilledMembers"></PivotViewDrilledMember>
                </PivotViewDrilledMembers>
            </PivotViewDataSourceSettings>
            <PivotViewGridSettings ColumnWidth="120"></PivotViewGridSettings>
        </SfPivotView>
    </div>
</div>
<div class="col-lg-3 property-section pivot-table-property-section">
    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<br>
    <div class="property-panel-section">
        <div class="property-panel-header" style="padding-bottom:10px; font-size:16px">Properties</div>
        <div class="property-panel-content">
            <table id="property" style="width: 100%;height:100%;" class="property-panel-table">
                <tbody>
                    <tr>
                        <td>
                            <div style="font-weight: 600; font-size: 13px">
                                Hide grand totals
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div>
                                <SfRadioButton Label="Row" Name="Total" Value=@("Row") Checked=@("Row") ValueChange="OnChange" TChecked="string"></SfRadioButton>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div>
                                <SfRadioButton Label="Column" Name="Total" Value=@("Column") Checked=@("Column") ValueChange="OnChange" TChecked="string"></SfRadioButton>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div>
                                <SfRadioButton Label="Both" Name="Total" Value=@("Both") Checked=@("Both") ValueChange="OnChange" TChecked="string"></SfRadioButton>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div style="font-weight: 600; font-size: 13px; padding-top: 20px;">
                                Hide sub-totals
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div style="padding-top: 20px;">
                                <SfMultiSelect TValue="string[]" TItem="DropDownData" Placeholder="Select fields to hide its sub-totals" Mode="@VisualMode.CheckBox" DataSource="@Fields" ShowClearButton="false"
                                                EnableSelectionOrder="false" ShowDropDownIcon="true" PopupWidth="100%" Width="80%" AllowFiltering="false">
                                    <MultiSelectEvents TValue="string[]" TItem="DropDownData" ValueChange="UpdateSubTotals"></MultiSelectEvents>
                                    <MultiSelectFieldSettings Text="Name" Value="Value"></MultiSelectFieldSettings>
                                </SfMultiSelect>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
<style>
    .e-pivotview {
        min-height: 200px;
    }

    .pivot-table-property-section {
        overflow: auto;
    }

	.pivot-table-property-section .e-multiselect {
		padding: 0;
	}
</style>

@code{
    public string[] DrilledMembers = new string[] { "France" };
    public bool RowGrandTotal = true;
    public bool ColumnGrandTotal = true;
    public bool GrandTotal = false;
    public bool RowSubTotal = true;
    public bool ColumnSubTotal = true;
    public List<PivotProductDetails> Data { get; set; }

    protected override void OnInitialized()
    {
        this.Data = PivotProductDetails.GetProductData();
    }

    public void OnChange(ChangeArgs<string> args)
    {
        if (args.Value == "Row")
        {
            this.RowGrandTotal = false;
            this.GrandTotal = this.ColumnGrandTotal = true;
        }
        else if (args.Value == "Column")
        {
            this.ColumnGrandTotal = false;
            this.GrandTotal = this.RowGrandTotal = true;
        }
        else
        {
            this.GrandTotal = false;
            this.ColumnGrandTotal = this.RowGrandTotal = true;
        }
    }

    public void UpdateSubTotals(@Syncfusion.Blazor.DropDowns.MultiSelectChangeEventArgs<string[]> args)
    {
        this.RowSubTotal = this.ColumnSubTotal = true;
        if (args.Value != null)
        {
            foreach (string value in args.Value)
            {
                if (value == "Country")
                {
                    this.RowSubTotal = false;
                }
                else if (value == "Year")
                {
                    this.ColumnSubTotal = false;
                }
            }
        }
    }

    List<DropDownData> Fields = new List<DropDownData>() {
        new DropDownData { Name = "Country", Value = "Country" },
        new DropDownData { Name = "Year", Value = "Year" }
    };

    public class DropDownData
    {
        public string Name { get; set; }
        public string Value { get; set; }
    }
}
